<template>
	<view class="totalStoreSales">
		<tabbar currentText="首页">
			<!-- <view class="tab_bgc" :style="{height: tabIndex == '0' ? '840rpx' : 'auto'}"> -->
			<view class="tab_bgc">
				<!-- <view class="state"></view>
				<view class="tab_title">
					<!-- <text>{{user_info.deptName || '首页'}}</text> 
					<text>报表统计</text>
				</view> -->
				<view class="header">报表统计</view>
				<view class="uni-swiper-tab">
					<!-- <scroll-view scroll-x class="uni-swiper-tab"> -->
					<block v-for="(tabBar,index) in tabBars" :key="index">
						<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @click="toggleTab(index)">
							{{tabBar.name}}
							<view class="swiper-tab-line">
							</view>
						</view>
					</block>
					<!-- </scroll-view> -->
				</view>
				<view class="hr"></view>
				<block v-if="tabIndex == '0'">
					<view class="clueQuantity">						
						<view class="clueQuantity_list">
							<view class="all_total">
								<view class="number">
									{{chart_data['clueCount']}}
								</view>
								<view class="all_number_title">
									线索总量
								</view>
							</view>
							<view class="line"></view>
							<view class="progress_total">
								<view class="number">
									{{chart_data['followCount']}}
								</view>
								<view class="all_number_title">
									跟进总量
								</view>
							</view>
							<view class="line"></view>
							<view class="deal_total">
								<view class="number">
									{{chart_data['dealCount']}}
								</view>
								<view class="all_number_title">
									成交总量
								</view>
							</view>
							<view class="line"></view>
							<view class="defeat_total">
								<view class="number">
									{{chart_data['defeatedCount'] + chart_data['invalidCount'] || 0}}
								</view>
								<view class="all_number_title">
									战败无效
								</view>
							</view>
						</view>
					</view>

					<view class="clueQuantity_title">
						线索量
					</view>
					<view class="total_chart">
						<!-- 第一行 -->
						<view class="one">
							<text class="one_O">近180天</text>
							<text class="one_W">近30天</text>
							<text class="one_T">近7天</text>
						</view>
						<!-- 第二行 -->
						<view class="two">
							<!-- <view class="two_C"></view> -->
							<view class="gradualChange_two">C</view>
							<view class="two_Num">
								<view class="two_O">{{ clueQuantity['C'].num180 }}</view>
								<view class="two_W">{{ clueQuantity['C'].num30 }}</view>
								<view class="two_T">{{ clueQuantity['C'].num7 }}</view>
							</view>
						</view>
						<!-- 第三行 -->
						<view class="three">
							<!-- <view class="two_C"></view> -->
							<view class="gradualChange_three">B</view>
							<view class="three_Num">
								<view class="three_O">{{ clueQuantity['B'].num180 }}</view>
								<view class="three_W">{{ clueQuantity['B'].num30 }}</view>
								<view class="three_T">{{ clueQuantity['B'].num7 }}</view>
							</view>
						</view>
						<!-- 第四行 -->
						<view class="four">
							<!-- <view class="two_C"></view> -->
							<view class="gradualChange_four">A</view>
							<view class="four_Num">
								<view class="four_O">{{ clueQuantity['A'].num180 }}</view>
								<view class="four_W">{{ clueQuantity['A'].num30 }}</view>
								<view class="four_T">{{ clueQuantity['A'].num7 }}</view>
							</view>
						</view>
						<!-- 第五行 -->
						<view class="five">
							<!-- <view class="two_C"></view> -->
							<view class="gradualChange_five">H</view>
							<view class="five_Num">
								<view class="five_O">{{ clueQuantity['H'].num180 }}</view>
								<view class="five_W">{{ clueQuantity['H'].num30 }}</view>
								<view class="five_T">{{ clueQuantity['H'].num7 }}</view>
							</view>
						</view>

						<view class="six">
							<!-- <view class="two_C"></view> -->
							<view class="gradualChange_six">O</view>
							<view class="six_Num">
								<view class="six_O">{{ clueQuantity['O'].num180 }}</view>
								<view class="six_W">{{ clueQuantity['O'].num30 }}</view>
								<view class="six_T">{{ clueQuantity['O'].num7 }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<total-store-sales-overview v-if="tabIndex == '0'" @upPage='upPageFun' :chartDataOne="chart_data1" :chartDataTwo="chart_data2"></total-store-sales-overview>
			<activity-form v-else-if="tabIndex == '1'"></activity-form>
			<channel-form v-else-if="tabIndex == '2'"></channel-form>
		</tabbar>
	</view>
</template>

<script>
	import {
		overviewByDealerId
	} from '@/service/api/api.js';
	import tabbar from "@/components/tabbar/tabbar.vue";
	import totalStoreSalesOverview from '../../components/totalStoreSalesOverview/totalStoreSalesOverview.vue'
	import activityForm from '@/pages/reportForm/components/activityForm/index.vue'
	import channelForm from '@/pages/reportForm/components/channelForm/index.vue'

	export default {
		data() {
			return {
				tabIndex: 0, //选中标签栏的序列
				listContentIndex: 0,
				contentList: [
					"概览",
					"活动",
					"渠道",
					// "客流"

				],
				tabBars: [{
						name: '概览',
						id: '1'
					},
					{
						name: '活动',
						id: '2'
					},
					{
						name: '渠道',
						id: '3'
					},
					// {
					// 	name: '客流',
					// 	id: '4'
					// }

				],
				selectActivitiesListcontet: [{
						title: '活动名称不知道最多几个字',
						id: '1'
					},
					{
						title: '活动名称不知道最多几个字',
						id: '2'
					},
					{
						title: '活动名称不知道最多几个字',
						id: '3'
					},
					{
						title: '活动名称不知道最多几个字',
						id: '4'
					}
				],
				swiperHeight: 0,
				user_info: {},
				chart_data1: {
					"categories": [],
					"series": []
				},
				chart_data2: {
					"categories": [],
					"series": [{
						"data": []
					}]
				},
				chart_data: {},
				clueQuantity: {
					C: {
						intentionLevel: 'C',
						num180: 0,
						num30: 0,
						num7: 0
					},
					B: {
						intentionLevel: 'B',
						num180: 0,
						num30: 0,
						num7: 0
					},
					A: {
						intentionLevel: 'A',
						num180: 0,
						num30: 0,
						num7: 0
					},
					H: {
						intentionLevel: 'H',
						num180: 0,
						num30: 0,
						num7: 0
					},
					O: {
						intentionLevel: 'O',
						num180: 0,
						num30: 0,
						num7: 0
					}
				},
				
			}
		},
		components: {
			totalStoreSalesOverview,
			tabbar,
			activityForm,
			channelForm
		},
		onLoad() {
			this.user_info = uni.getStorageSync('user_info')
			this.get_list()
		},
		methods: {
			upPageFun(e){
				// console.log(e,'-------------------车型选择 ')
			},
			get_list() {
				let obj = {}
				obj['dealerId'] = this.user_info['userDeptId']
				      
				console.log(this.user_info,"------------------------用户登录数据")

				overviewByDealerId(obj).then((res) => {
					if (res.data.code == 0) {
						res.data.data.reportIntentionLevels.forEach((v, i) => {
							if (v.intentionLevel == 'C') {
								switch (v.archivingCycle) {
									case "180":
										this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
										break;
									case "30":
										this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
										break;
									case "7":
										this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
										break;
								}
							}
							if (v.intentionLevel == 'B') {
								switch (v.archivingCycle) {
									case "180":
										this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
										break;
									case "30":
										this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
										break;
									case "7":
										this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
										break;
								}
							}
							if (v.intentionLevel == 'A') {
								switch (v.archivingCycle) {
									case "180":
										this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
										break;
									case "30":
										this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
										break;
									case "7":
										this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
										break;
								}
							}
							if (v.intentionLevel == 'H') {
								switch (v.archivingCycle) {
									case "180":
										this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
										break;
									case "30":
										this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
										break;
									case "7":
										this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
										break;
								}
							}
							if (v.intentionLevel == 'O') {
								switch (v.archivingCycle) {
									case "180":
										this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
										break;
									case "30":
										this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
										break;
									case "7":
										this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
										break;
								}
							}
						});

						//2线索量变化
						let curDays = []
						let dataObj = {}
						// 颜色配置
						let stackDataColor = {
							O: '#FD5757',
							H: '#FECD2F',
							A: '#7CDEBC',
							B: '#3CB3D0',
							C: '#5D9BFC'
						};
						res.data.data.reportChanges.forEach((v, i) => {
							if (v.archivingCycle == 7) {
								if (v.curDay) {
									var curDay = v.curDay.split('-')[1] + '/' + v.curDay.split('-')[2]
									curDays.push(curDay)
									curDays = Array.from(new Set(curDays));
								}
								if(Object.keys(dataObj).indexOf(v.intentionLevel) == -1) {
									dataObj[v.intentionLevel] =[v.clueCount]
								} else {
									dataObj[v.intentionLevel].push(v.clueCount)
								}
							}
						});		
						let seriesArr = []
						Object.keys(dataObj).forEach(item => {
							// 规范数据格式  固定长度 
							
							let arrdataObj=new Array(curDays.length).fill(0)
							for (let key in dataObj[item]) {
								if(key<curDays.length){
									arrdataObj.splice(key,1, dataObj[item][key]) 
								}							
							}
							seriesArr.push({
								name: item + '级',
								data: arrdataObj,
								type: 'bar',
								stack: 'stackone',
								itemStyle: {
									normal: {
										color: stackDataColor[item]
										// barBorderRadius: [10, 10, 10, 10],
									}
								},
								barWidth: 20
							});
						})
							
						let chart_data1 = {
							"categories": curDays,
							"series": seriesArr
						}
						this.chart_data1 = chart_data1

						//3战败量
						let chart_data2 = {
							"categories": [],
							"series": []
						}
						res.data.data.reportDefeateds.forEach((v, i) => {
							if (v.curDay) {
								var curDay = v.curDay.split('-')[1] + '/' + v.curDay.split('-')[2]
								chart_data2.categories.push(curDay)
								chart_data2.categories = Array.from(new Set(chart_data2.categories));
							}				
							chart_data2.series.push(v.defeatedCount)				
						})
						this.chart_data2 = chart_data2
						this.chart_data = res.data.data
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				}).catch(err => {

				})
			},
			toggleTab(index) {
				if (index == '3') return false
				this.tabIndex = index
			},

			toggleListContent(index) {
				this.listContentIndex = index
			},

		}
	}
</script>
<style lang="scss" scoped>
	// page {
	// 	background: #F2F2F2;
	// 	width: 750upx;
	// 	overflow-x: hidden;
	// }


	// .qiun-charts {
	// 	width: 700upx;
	// 	height: 350upx;
	// 	background-color: #FFFFFF;
	// }

	// .charts {
	// 	width: 700upx;
	// 	height: 350upx;
	// 	background-color: #FFFFFF;
	// }

	// .tab_bgc {
	// 	background-image: url('@/static/images/totalStoreState_bgc.png');
	// 	background-size: 100% 100%;
	// 	width: 100%;
	// 	height: 820rpx;

	// 	.state {
	// 		height: 88rpx;
	// 	}

	// 	.tab_title {
	// 		width: 100%;
	// 		height: 128rpx;
	// 		font-size: 32rpx;
	// 		font-weight: bold;
	// 		color: #FFFFFF;
	// 		position: relative;
	// 		box-sizing: border-box;
	// 		padding-left: 30rpx;
	// 	}
	// }
	.header{
		text-align: center;
		font-size: 32rpx;
		color:#43425D;
		margin: 32rpx 0 28rpx 0;
	}
	
	.uni-swiper-tab{
		display: flex;
	}
	.uni-swiper-tab .active {
		color: #3B86FC;
		font-weight: normal;
		position: relative;
	}
	.swiper-tab-list {
		//color: #FFFFFF;
		width: 188rpx;
		font-size: 28rpx;
		flex: 1;
	}
	.active .swiper-tab-line {
		width:40rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background: #3B86FF;
		position: absolute;
		left: 104rpx;
	}
	.hr{
		height: 12rpx;
		background: #F5F6FA;
	}
	.clueQuantity {
		padding: 30rpx 40rpx;
		.clueQuantity_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			.number{
				font-size: 36rpx;
				margin-bottom: 12rpx;
				font-weight: 600;
			}
		}
		.line{
			height: 80rpx;
			border-left: 2rpx solid #F0F0F7;
		}
		
	}
	.clueQuantity_title{
		height: 80rpx;
		line-height: 80rpx;
		background: #F5F6FA;
		padding-left: 30rpx;
		font-size: 32rpx;
		font-weight: 500;
	}
	.total_chart {
		padding: 10rpx 0 40rpx 0;
		.one {
			height: 56rpx;
			line-height: 56rpx;
			display: flex;
			justify-content: flex-end;
			margin-right: 36rpx;
		//	color: #FFFFFF;

			text {
				margin-right: 40rpx;
				font-size: 20rpx;
				color:#43425D;
				opacity: 0.6;
			}

			.one_O {
				margin-right: 40rpx;
			}

			.one_W {
				margin-right: 50rpx;
			}

			.one_T {
				margin-right: 10rpx;
			}
		}

		.two {
			width: 690rpx;
			height: 48rpx;
			display: flex;
			border-radius: 24rpx;
			margin-left: 30rpx;

			.two_Num {
				// width: 370rpx;
				width: 100%;
				height: 48rpx;
				border-radius:  24rpx ;
				color: #43425D;
				background: rgb(229,238,252);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				view {
					font-size: 20rpx;
				}

				.two_O {
					margin-left: 16rpx;
					margin-right: 120rpx;
				}
				.two_W{
					margin-right: 105rpx;
				}
				.two_T{
					margin-right: 40rpx;
				}
			}

			.gradualChange_two {
				position: absolute;
				
				width: 262rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #5A92DB;
				background: linear-gradient(90deg, #F0F4FC 0%, #5D9BFF 100%);
				padding: 4rpx 0 0 14rpx;
			}
		}

		.three {
			width: 690rpx;
			height: 48rpx;
			display: flex;
			border-radius: 24rpx;
			margin-left: 30rpx;
			margin-top: 10rpx;

			.three_Num {
				// width: 410rpx;
				width: 100%;
				height: 48rpx;
				border-radius:  24rpx ;
				color: #43425D;
				background: rgb(229,246,250);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				view {
					font-size: 20rpx;
				}

				.three_O {
					
					margin-right: 120rpx;
				}
				.three_W{
					margin-right: 105rpx;
				}
				.three_T{
					margin-right: 40rpx;
				}
			}

			.gradualChange_three {
				position: absolute;
				
				width: 332rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 26rpx;
				
				font-weight: bold;
				color: #75B9CC;
				background: linear-gradient(90deg, #F0FCFB 0%, #3CB3D0 100%);
				padding: 4rpx 0 0 14rpx;
			}
		}

		.four {
			width: 690rpx;
			height: 48rpx;
			display: flex;
			border-radius: 24rpx;
			margin-left: 30rpx;
			margin-top: 10rpx;

			.four_Num {
				//width: 450rpx;
				width: 100%;
				height: 48rpx;
				border-radius: 24rpx ;
				color: #43425D;
				background: rgb(233,247,243);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				view {
					font-size: 20rpx;
				}

				.four_O {
					
					margin-right: 120rpx;
				}
				.four_W{
					margin-right: 105rpx;
				}
				.four_T{
					margin-right: 40rpx;
				}
			}

			.gradualChange_four {
				position: absolute;
				
				width: 240rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #69C893;
				background: linear-gradient(90deg, #F0F4FC 0%, #7CDEBC 100%);
				padding: 4rpx 0 0 14rpx;
			}
		}

		.five {
			width: 690rpx;
			height: 48rpx;
			display: flex;
			border-radius: 24rpx;
			margin-left: 30rpx;
			margin-top: 10rpx;

			view {
				font-size: 20rpx;
			}

			.five_Num {
				//width: 490rpx;
				width: 100%;
				height: 48rpx;
				border-radius: 24rpx ;
				color: #43425D;
				background: rgb(251,246,229);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.five_O {
					margin-right: 120rpx;
				}
				.five_W{
					margin-right: 105rpx;
				}
				.five_T{
					margin-right: 40rpx;
				}
			}

			.gradualChange_five {
				position: absolute;
				
				width: 200rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #D8AA2B;
				background: linear-gradient(90deg, #F0F4FC 0%, #F5D568 100%);
				padding: 4rpx 0 0 14rpx;
			}
		}

		.six {
			width: 690rpx;
			height: 48rpx;
			display: flex;
			border-radius: 24rpx;
			margin-left: 30rpx;
			margin-top: 10rpx;

			.six_Num {
				// width: 530rpx;
				width: 100%;
				height: 48rpx;
				border-radius: 24rpx;
				color: #43425D;
				background: rgb(252,228,228);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				view {
					font-size: 20rpx;
				}

				.six_O {
					margin-right: 120rpx;
				}
				.six_W{
					margin-right: 105rpx;
				}
				.six_T{
					margin-right: 40rpx;
				}
			}

			.gradualChange_six {
				position: absolute;
				
				width: 160rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 26rpx;
				color: #E26131;
				font-weight: bold;
				background: linear-gradient(90deg, #F0F4FC 0%, #FF5757 100%);
				padding: 4rpx 0 0 14rpx;
			}
		}

	}

	.clueQuantity_change {
		width: 100%;
		height: 560rpx;
		background-color: #FFFFFF;
		border-top: 12rpx solid #F5F6FA;

		.clueQuantity_change_title {
			font-size: 32rpx;
			color: #43425D;
			margin: 30rpx 0 0 30rpx;
		}

		.all_brand {
			font-size: 24rpx;
			color: #3B86FF;
			margin: 30rpx 0 0 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			position: relative;

			image {
				width: 10rpx;
				height: 10rpx;
				position: absolute;
				top: 13rpx;
				left: 110rpx;
			}

		}

		.clueQuantity_change_type {
			display: flex;
			margin-right: 20rpx;
			justify-content: flex-end;
		}

		.change_one {
			display: flex;
			margin-right: 40rpx;

			.change_model {
				width: 42rpx;
				height: 12rpx;
				background-color: #E26131;
				margin-top: 10rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 12rpx;
				font-weight: 400;
				color: #43425D;
			}
		}

		.change_two {
			display: flex;
			margin-right: 40rpx;

			.change_model_two {
				width: 42rpx;
				height: 12rpx;
				background-color: #D8AA2B;
				margin-top: 10rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 12rpx;
				font-weight: 400;
				color: #43425D;
			}
		}

		.change_three {
			display: flex;
			margin-right: 40rpx;

			.change_model_three {
				width: 42rpx;
				height: 12rpx;
				background-color: #69C893;
				margin-top: 10rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 12rpx;
				font-weight: 400;
				color: #43425D;
			}
		}

		.change_four {
			display: flex;
			margin-right: 30rpx;

			.change_model_four {
				width: 42rpx;
				height: 12rpx;
				background-color: #75B9CC;
				margin-top: 10rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 12rpx;
				font-weight: 400;
				color: #43425D;
			}
		}

		.change_five {
			display: flex;

			.change_model_five {
				width: 42rpx;
				height: 12rpx;
				background-color: #5A92DB;
				margin-top: 10rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 12rpx;
				font-weight: 400;
				color: #43425D;
			}
		}
	}

	.amountDefeat {
		width: 100%;
		height: 502rpx;
		background-color: #FFFFFF;
		border-top: 12rpx solid #F5F6FA;

		.amountDefeat_title {
			font-size: 32rpx;
			color: #43425D;
			margin: 30rpx 0 0 30rpx;
		}

		.all_brand {
			font-size: 24rpx;
			color: #3B86FF;
			margin: 30rpx 0 0 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			position: relative;

			image {
				width: 10rpx;
				height: 10rpx;
				position: absolute;
				top: 13rpx;
				left: 110rpx;
			}

		}
	}

	.activityContribution {
		width: 750rpx;
		height: 130rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #D7D7E9;

		// opacity: 1;
		// filter: blur(2rpx);
		.activityContribution_title {
			padding: 30rpx 0 0 30rpx;
			font-size: 32rpx;
		}

		.selectActivities {
			font-size: 24rpx;
			color: #3B86FF;
			margin: 18rpx 0 0 30rpx;
			position: relative;
			// display: flex;
			// float: left;

			image {
				width: 10rpx;
				height: 10rpx;
				position: absolute;
				top: 13rpx;
				left: 110rpx;
			}
		}

		.selectActivities_state_change {
			position: absolute;
			top: 80rpx;
			right: 30rpx;

			.nearFuture {
				display: inline-block;
				width: 118rpx;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 26rpx;
				color: #3B86FF;
				border-radius: 4px 0px 0px 4px;
				text-align: center;
				border: 2rpx solid #3B86FF;
			}

			.forward {
				display: inline-block;
				width: 118rpx;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				border: 2rpx solid #3B86FF;
				border-radius: 0px 4px 4px 0px;
				text-align: center;
				background: #3B86FF;
			}
		}
	}

	.selectActivities_list {
		width: 750rpx;
		background-color: #FFFFFF;

		.selectActivities_list_content {
			width: 750rpx;
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 30rpx;
			// margin:0 30rpx 0 30rpx ;
			font-size: 28rpx;
			border: 2rpx solid #D7D7E9;

		}

		.selectActivities_list_content_active {
			// padding-left:30rpx ; 
			border: 2rpx solid #3B86FF;
		}
	}
</style>